<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>智能客服</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="Free HTML Templates" name="keywords">
    <meta content="Free HTML Templates" name="description">

    <!-- Favicon -->
    <link href="/static/chatbot/img/favicon.ico" rel="icon">

    <!-- Google Web Fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"> 

    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">

    <!-- Libraries Stylesheet -->
    <link href="/static/chatbot/lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">

    <!-- Customized Bootstrap Stylesheet -->
    <link href="/static/chatbot/css/style.css" rel="stylesheet">

    <style>
        *{
            font-family: SimSun;
        }
        div.col-lg-3-new {
            flex: 0 0 70%;
            max-width: 70%;
            float: right;
        }
        a.text-center{
            text-align:left;
        }
        .text-type{
            font-size: 20px;
            font-family: SimSun;
        }
        .text-type2{
            font-size: 18px;
            font-family: SimSun;
        }
    </style>

    <style>
        *{margin:0px;padding: 0px;}
        ul{list-style: none;}

        #nav{
            height:50px;
            background-color:#46474a;
        }
        #nav ul li{
            width:120px;
            float:left;
        }
        #nav ul li a{
            display:block;
            width: 120px;
            height:50px;
            line-height: 50px;
            text-decoration:none;
            font-size:18px;
            /* font-weight: bold; */
            color:white;
            text-align:center;
        }
        #nav ul li a:hover{
            background-color: white;
            color: #46474a;
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            padding: 12px 16px;
            z-index: 1;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>

    <style type="text/css">
        li.margin {margin-left:50px;}
    </style>

    {% block func_script %}
                
    {% endblock func_script %}
</head>

<body>
    <!--统一的头部开始-->
    <div id="nav">
        <ul>
            <li class="margin"><img src="/static/images/logo.png" style="width: 87.4px;height: 50px;"></li>
            <li><a href="{% url 'purchase_index' %}">购物商城</a></li>
            <li><a href="/moment/">车友圈</a></li>
            <li><a href="/view_power/">充电规划</a></li>
            <li><a href="/chatbot/botmain/">智能客服</a></li>
            <li><a href="/repair/">维修保养</a></li>
			

            {% if "info" in request.session.keys %}

            <li class="dropdown">
            <a href="#">我的</a>
            <div class="dropdown-content">
                <a href="{% url 'show_order' %}" style="color: #46474a;font-size: 17px;">购物订单</a>
                <a href="/repair/list/" style="color: #46474a;font-size: 17px;">维修订单</a>
                <a href="/infomation/" style="color: #46474a;font-size: 17px;">个人信息</a>
                <a href="/signout/" style="color: #46474a;font-size: 17px;">注销</a>
            </div>

        </li>

        {% else %}
        <li><a href="/signin/">登录 / 注册</a></li>
        {% endif %}
        </ul>
    </div>
    <!--统一的头部结束-->


    <!-- Topbar Start -->
    <div class="container-fluid">

        <div class="row align-items-center py-3 px-xl-5">
            
        </div>
    </div>
    <!-- Topbar End -->


    <!-- Navbar Start -->
    <div class="container-fluid mb-5">
        <div class="row border-top px-xl-5">
            <div class="col-lg-3 d-none d-lg-block">
                <a class="btn shadow-none d-flex align-items-center justify-content-between bg-primary text-white w-100" data-toggle="collapse" href="#navbar-vertical" style="height: 65px; margin-top: -1px; padding: 0 30px;">
                    <h6 class="m-0">在线帮助</h6>
                    <i class="fa fa-angle-down text-dark"></i>
                </a>
                <nav class="collapse show navbar navbar-vertical navbar-light align-items-start p-0 border border-top-0 border-bottom-0" id="navbar-vertical">
                    <div class="navbar-nav w-100 overflow-hidden" style="height: 500px">
                        
                        <a href="{% url 'botmain' %}" class="nav-item nav-link">使用说明</a>   
                        <a href="{% url 'buying' %}" class="nav-item nav-link">智能用车</a>
                        <a href="{% url 'repairing' %}" class="nav-item nav-link">维修保养</a>
                        <a href="{% url 'generating' %}" class="nav-item nav-link">充电规划</a>
                        <!--<a href="{% url 'manbot_rep' %}" class="nav-item nav-link">内部登录</a>-->
                        <a href="{% url 'contact' %}" class="nav-item nav-link">开发者们</a>
                        <div class="nav-item dropdown">
                            <a href="#" class="nav-link" data-toggle="dropdown">客服服务<i class="fa fa-angle-down float-right mt-1"></i></a>
                            <div class="dropdown-menu position-absolute bg-secondary border-0 rounded-0 w-100 m-0">
                                <a href="{% url 'robot' %}" class="dropdown-item">智能客服</a>
                                <a href="{% url 'manbot' %}" class="dropdown-item">人工客服</a>
                            </div>
                        </div>
                    </div>
                </nav>
            </div>
            
            {% block room %}
            
            {% endblock room %}
            
        </div>
    </div>
    <!-- Navbar End -->




    <!-- Back to Top -->
    <a href="#" class="btn btn-primary back-to-top"><i class="fa fa-angle-double-up"></i></a>


    <!-- JavaScript Libraries -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
    <script src="/static/chatbot/lib/easing/easing.min.js"></script>
    <script src="/static/chatbot/lib/owlcarousel/owl.carousel.min.js"></script>

    <!-- Contact Javascript File -->
    <script src="/static/chatbot/mail/jqBootstrapValidation.min.js"></script>
    <script src="/static/chatbot/mail/contact.js"></script>

    <!-- Template Javascript -->
    <script src="/static/chatbot/js/main.js"></script>
</body>

</html>